<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Vue(options){
        this.$data = options.data;
    }
    Vue.extend = function(options){
        return function VueCompoent(){
            this.$data = options.data;
        }
    }
    Vue.extendFun = function(options){
        return function VueCompoent(){
            // 方只有在被调用时，才会执行内部代码
            // 该函数是作为构造函数返回的
            // 所以内部的data方法只有在new 对象时才会执行
            // 而 data 定义内部是以 返回 匿名对象的方式进行数据定义的
            // 所以 匿名对象每次调用都会构建新的数据空间，实现作为数据参考的同时，又不会发生数据共享
            this.$data = options.data();
        }
    }

    // 因为定义时采用匿名对象的方式描述数据仓库
    // 所以每次匿名对象定义都会重新创建新的存储空间
    // 因此new出的多vue实例之间数据不会共享
    let vm1 = new Vue({
        data:{
            msg:"测试数据"
        }
    })

    let vm2 = new Vue({
        data:{
            msg:"测试数据"
        }
    });

    // 浏览器执行
    /*
        vm1.$data
          ==> {msg: "测试数据"}
        vm2.$data
          ==> {msg: "测试数据"}
        vm1.$data === vm2.$data
          ==> false
        vm1.$data.msg = "aaaaa";
          ==> "aaaaa"
        vm1.$data
          ==> {msg: "aaaaa"}
        vm2.$data
          ==> {msg: "测试数据"}
    */

    let Comp = Vue.extend({
        data:{
            info:"info变量"
        }
    })

    let vm3 = new Comp();
    let vm4 = new Comp();
    // 浏览器运行
    /*
        vm3.$data
            ==> {info: "info变量"}
        vm4.$data
            ==> {info: "info变量"}
        vm3.$data.info = "aaaaaaa";
            ==> "aaaaaaa"
        vm3.$data
            ==> {info: "aaaaaaa"}
        vm4.$data
            ==> {info: "aaaaaaa"}
        vm3.$data === vm4.$data
            ==> true
    
    */

    let CompA = Vue.extendFun({
        data:function(){
            return {
                text:"测试数据"
            }
        }
    });

    let vm5 = new CompA();
    let vm6 = new CompA();
    // 浏览器执行结果
    /*
        vm5.$data    
            ==> {text: "测试数据"}
        vm6.$data
            ==> {text: "测试数据"}
        vm5.$data.text = "aaaaa";
            ==> "aaaaa"
        vm5.$data
            ==> {text: "aaaaa"}
        vm6.$data
            ==> {text: "测试数据"}
        vm5.$data === vm6.$data
            ==> false
    
    */
</script>
</html>